import React from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Image,
    Animated,
    Easing,
    TouchableOpacity
} from 'react-native';


export default class Star extends React.Component {
  constructor() {
      super();
      this.springValue = new Animated.Value(1);
      this.state = {
          selected: false
      }
  }

  spring() {
      const { position, starSelectedInPosition } = this.props;
      this.springValue.setValue(1);

      Animated.spring(
          this.springValue,
          {
              toValue: 1,
              friction: 2,
              tension: 1
          }
      ).start();

      this.setState({ selected: !this.state.selected });
      starSelectedInPosition(position)
  }

  render() {
      const { fill, half, size, disabled, marginLeft} = this.props;

      const starStyle = [styles.starStyle];
    
      const STAR_IMAGE = size == 'large' || size == 'small' ? require('../../assets/icon_star.png') : require('../../assets/icon_star_middle.png');
      const STAR_SELECTED_IMAGE = size == 'large' ||size == 'small'  ? require('../../assets/icon_star_selected.png') : require('../../assets/icon_star_selected_middle.png');
      const STAR_SELECTED_IMAGE_HALF = size == 'large' ||size == 'small' ? require('../../assets/icon_star_selected_half.png') : require('../../assets/icon_star_selected_half_middle.png');

      switch (size) {
          case 'large':
              break;
          case 'middle':
              starStyle.push({width: 28, height: 28});
              break;
          case 'small':
              starStyle.push({width: 16, height: 16});
              break;
          default:
              break;
      }

      return (
          <TouchableOpacity
              activeOpacity={1}
              onPress={this.spring.bind(this)}
              disabled={disabled}
          >
              <Animated.Image
                  source={fill ? STAR_SELECTED_IMAGE : half ? STAR_SELECTED_IMAGE_HALF : STAR_IMAGE}
                  style={[starStyle, {marginLeft:marginLeft }, {transform: [{ scale: this.springValue }]}]}
              />
          </TouchableOpacity>
      );
    }
}

Star.propTypes = {
    size: PropTypes.oneOf(['large', 'middle', 'small']),
    //尺寸
    fill: PropTypes.bool,
    //是否填充
    half: PropTypes.bool,
    //是否半星
    disabled: PropTypes.bool,
    //是否禁用
};

Star.defaultProps = {
    size: 'large',
    fill: false,
    half: false,
    disable: false,
};

const styles = StyleSheet.create({
  starStyle: {
      width: 36,
      height: 36,
  }
});
